<template>
  <div class="login">
    <div class="login-main">
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        class="demo-loginForm"
      >
        <!-- 标题 -->
        <p class="title">系统登录</p>
        <!-- 用户 -->
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" autocomplete="off">
            <i slot="prefix" class="iconfont icon-yonghu"></i>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input :type="showType" v-model="loginForm.password">
            <i slot="prefix" class="iconfont icon-suoding"></i>
            <i
              slot="suffix"
              class="iconfont"
              @click="keyclick"
              :class="showType == 'password' ? 'icon-yanjing' : 'icon-yanjing1'"
            ></i>
          </el-input>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm" class="submit"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkaccount, checkpassword } from '@/utils/utils';
import { checkLogin } from '@/api/user';
export default {
  data () {
    // 登录数据
    return {
      loginForm: {
        account: '',
        password: '',
      },
      //表单验证
      rules: {
        //用户名验证规则
        account: [{ validator: checkaccount, trigger: 'blur' }],
        //密码验证规则
        password: [{ validator: checkpassword, trigger: 'blur' }]
      },
      //密码input框 Type属性的值
      showType: 'password',
    }
  },
  methods: {
    // 切换密码input框 Type属性的值
    keyclick () {
      this.showType == 'password'
        ? (this.showType = 'text')
        : (this.showType = 'password')
    },
    //点击提交按钮 进行表单验证
    submitForm () {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // console.log('this.loginForm :>> ', this.loginForm);
          let res = await checkLogin({ ...this.loginForm })
          let { code, msg, token, rode } = res.data
          //如果code==0时，代表登录成功
          if (code == 0) {
            //登录成功后,将token存储到本地
            localStorage.setItem('t_k', token)
            // 跳转到首页
            this.$router.push('/')
          }
        } else {
          this.$message({
            message: '验证失败了',
            type: 'error'
          });
          return
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-main {
    text-align: center;
    width: 400px;
    .submit {
      width: 100%;
    }
    .title {
      line-height: 60px;
      font-style: 18px;
      font-weight: 600;
      color: white;
    }
    /deep/.el-input__inner {
      background: #2d3a4b;
      color: white;
    }
  }
}
</style>